<template>
  <div>
    <router-view :key="$route.fullPath"> </router-view>
    <div class="text-center mt-16 mb-9">
      <v-pagination
        v-model="$store.state.currentPage"
        :length="$store.state.pageCount"
        :total-visible="7"
        @input="input"
      ></v-pagination>
    </div>
  </div>
</template>

<script>
import ArticleList from "./ArticleList.vue";
export default {
  name: "MainPage",
  data() {
    return {
      page: 1,
      pageCount: this.$store.state.pageCount,
    };
  },
  components: {
    ArticleList,
  },
  methods: {
    input(value) {
      this.page = value;

      this.$router.push({
        name: this.$store.state.arcticleListRouter,
        query: {
          current: this.page,
        },
      });
    },
  },

  mounted() {
    this.$axios
      .get("/arcticle/getpagedata", {
        params: {
          current: this.page,
        },
      })
      .then(
        (res) => {
          this.pageCount = res.data.data.allPages;
          this.$store.commit("TAGTOMAIN", res.data.data.allPages);
        },
        (error) => {
          console.log(error.message);
        }
      );
    this.$router.push({
      name: "ArticleList",
      query: {
        current: this.page,
      },
    });
  },
};
</script>

<style>
</style>